<template>
  <div class="main">
    <div class="top">
      <div class="user_warp">
        <img class="img" src="../../assets/img/userhead/User07b.svg">
        <div class="name">{{$store.getters.getLoginUser.realName}}</div>
      </div>
      <div class="prove_warp">
        <div class="number">{{submitedProvesNumber}}</div>
        <div class="text">已提交证明</div>
      </div>
    </div>
    <div class="middle">
      <div class="option_warp">
        <!--<mine-option content="我的文件" topath="/home" :imgsrc="myfileImgSrc"></mine-option>-->
        <mine-option content="意见反馈" topath="uploadopinion" :imgsrc="myadviceImgSrc"></mine-option>
      </div>
    </div>
    <div class="bottom">
      <div class="exit" @click="logout()">
        <span class="text">退出登录</span>
      </div>
    </div>
    <tip_yesorno v-if="isShowLogoutEnsure" :imgsrc="tip_yesorno_img"
                 :imgwidth="tip_yesorno_width" :imgheight="tip_yesorno_height"
                 :title="tip_yesorno_title" :content="tip_yesorno_content"
                 @closetip_ensure="closeLougoutEnsureAndLogout($event)"
                 @closetip_cancel="closeLougoutEnsure($event)"></tip_yesorno>
    <tip_loading v-if="isShowTipLoading"></tip_loading>
  </div>
</template>

<script>
import mineOption from '../../components/mine_option'
import myfileImgSrc from '../../assets/img/icon/uploader_personal_document.svg'
import myadviceImgSrc from '../../assets/img/icon/uploader_personal_advice.svg'
import logoutEnsureImage from '../../assets/img/pluto-done.svg'
import tipYesOrNo from '../../components/public/tip_yesorno'
import tipLoading from '../../components/public/tip_loading'
// 易班api的axios
import YBOpenApi from '../../service/YBOpenApi'
// 引入证明端的业务层
import certificationServices from '../../service/certification'
export default {
  name: 'mine',
  data () {
    return {
      myfileImgSrc: myfileImgSrc,
      myadviceImgSrc: myadviceImgSrc,
      isShowLogoutEnsure: false,
      tip_yesorno_img: logoutEnsureImage,
      tip_yesorno_width: 171,
      tip_yesorno_height: 120,
      tip_yesorno_title: '是否确认退出登录？',
      tip_yesorno_content: '',
      submitedProvesNumber: -2,
      isShowTipLoading: false // 是否显示loading
    }
  },
  components: {
    mineOption: mineOption,
    tip_yesorno: tipYesOrNo,
    tip_loading: tipLoading
  },
  methods: {
    logout () {
      this.showLougoutEnsure()
    },
    showLougoutEnsure () {
      this.isShowLogoutEnsure = true
    },
    closeLougoutEnsure () {
      this.isShowLogoutEnsure = false
    },
    async closeLougoutEnsureAndLogout () {
      this.closeLougoutEnsure()
      // alert('退出登录')
      // 清除本地信息
      this.$store.commit('initUser', null)
      sessionStorage.removeItem('LoginUser')
      this.$router.push({
        name: 'login'
      })
    }
  },
  async mounted () {
    this.isShowTipLoading = true
    this.submitedProvesNumber = this.$store.getters.getSubmitedProvesNumber
    if (this.submitedProvesNumber < 0) {
      let resultSubmited = await certificationServices.getCertification(true, this.$store.getters.getLoginUser.organization)
      resultSubmited = resultSubmited.data
      if (resultSubmited.code === -1) {
        alert('服务器出错：' + resultSubmited.msg + ', 请稍后再试')
        return
      }
      this.submitedProvesNumber = resultSubmited.data.length
      this.$store.commit('setSubmitedProvesNumber', this.submitedProvesNumber)
    }
    this.isShowTipLoading = false
  },
  destroyed () {
    this.isShowTipLoading = false
  }
}
</script>

<style lang="scss" scoped>
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
    position: relative;
    .top{
      width: 100%;
      height: px2rem(125);
      position: relative;
      border-top: px2rem(1) solid transparent;
      background: -webkit-linear-gradient(to bottom,#02A4ED,#59C2FF); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(to bottom,#02A4ED,#59C2FF); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(to bottom,#02A4ED,#59C2FF); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom,#02A4ED,#59C2FF); /* 标准的语法 */
      .user_warp{
        /*border: px2rem(2) solid black;*/
        margin: px2rem(11) 0 0 px2rem(20);
        /*width: px2rem(156);*/
        width: px2rem(158);
        height: px2rem(50);
        .img {
          float: left;
          /*border: px2rem(2) solid red;*/
          /*padding: px2rem(10) px2rem(18) 0 px2rem(20);*/
          width: px2rem(50);
          height: px2rem(50);
        }
        .name {
          /*border: px2rem(2) solid red;*/
          float: left;
          width: px2rem(90);
          height: px2rem(30);
          line-height: px2rem(30);
          padding: px2rem(15) 0 px2rem(5) px2rem(18);
          font-size: px2rem(22);
          font-weight: bold;
          color: #FFF;
        }

      }
      .prove_warp {
        /*margin: px2rem(8) px2rem(20) 0 px2rem(295);*/
        position: absolute;
        top: px2rem(69);
        right: px2rem(20);
        width: px2rem(60);
        height: px2rem(56);
        /*background: black;*/
        color: #FFF;
        .number {
          font-size: px2rem(20);
          /*border: px2rem(1) solid red;*/
          width: px2rem(12);
          height: px2rem(28);
          line-height: px2rem(28);
          text-align: center;
          margin: 0 auto;
        }
        .text {
          font-size: $text-size-small;
          white-space: nowrap;
          /*border: px2rem(1) solid red;*/
        }
      }
    }
    @mixin option {
      /*width: px2rem(375);*/
      width: 100%;
      height: px2rem(54);
      background: #FFF;
      position: relative;
      line-height: px2rem(54);
      margin: 0 0 px2rem(2) 0;
    }
    .middle {
      position: absolute;
      top: px2rem(125);
      bottom: px2rem(55);
      /*background: #6CF;*/
      width: 100%;
      overflow: auto;
    }
    .bottom{
      .exit {
        @include option;
        /*border: px2rem(2) solid red;*/
        text-align: center;
        position: absolute;
        bottom: 0;
        margin: 0;
        border-top: px2rem(2) solid $background-color;
        border-bottom: px2rem(2) solid $background-color;
        .text {
          /*border: px2rem(2) solid black;*/
          font-size: $text-size-imp;
          /*font-weight: bold;*/
          color: #CC0F0F;
          line-height: px2rem(54);
        }
      }
    }
  }
</style>
